<template>
  <div>
    <div
      class="yearrange_wrap"
      v-if="dateType==='year'"
    >
      <el-date-picker
        ref="yearStart"
        v-model="yearStart"
        :type="dateType"
        :picker-options="startDatePicker"
        placeholder="开始时间"
        :value-format="valueFormat"
      >
      </el-date-picker>
      <span style="margin:0 10px">至</span>
      <el-date-picker
        ref="yearEnd"
        class="end_year_picker"
        v-model="yearEnd"
        :type="dateType"
        :value-format="valueFormat"
        :picker-options="endDatePicker"
        placeholder="结束时间"
      >
      </el-date-picker>
    </div>
    <el-date-picker
      v-else
      ref="datePicker"
      style="width:400px"
      v-model="dateValue"
      align="right"
      :type="dateType"
      :key="dateType"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :value-format="valueFormat"
      :default-time="['00:00:00','23:59:59']"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yearStart: '',
      yearEnd: '',
      dateValue: '',
      dateType: 'datetimerange',
      valueFormat: 'yyyy-MM-dd HH:mm:ss',
      pickerOptions: {
        shortcuts: [{
          text: '年',
          onClick: picker => {
            this.valueFormat = 'yyyy';
            this.changeType('year')
          }
        }, {
          text: '月',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM';
            this.changeType('monthrange')
          }
        }, {
          text: '日期时间',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM-dd HH:mm:ss';
            this.changeType('datetimerange')
          }
        }]
      },
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate()
    }
  },
  methods: {
    reset() {
      this.yearStart = '';
      this.yearEnd = '';
      this.dateValue = '';
      this.dateType = 'datetimerange';
      this.valueFormat = 'yyyy-MM-dd HH:mm:ss';
    },
    getVal() {
      if (this.dateType === 'year') {
        if (!this.yearStart && !this.yearEnd) {
          return ''
        }
        if (!this.yearStart) {
          this.$message({
            message: "请选择起始年份",
            type: "warning"
          });
          return 'error';
        }
        if (!this.yearEnd) {
          this.$message({
            message: "请选择结束年份",
            type: "warning"
          });
          return 'error';
        }
        return this.yearStart + '~' + this.yearEnd;
      } else {
        return this.dateValue ? this.dateValue[0] + '~' + this.dateValue[1] : '';
      }
    },
    beginDate() {
      const self = this
      return {
        shortcuts: [{
          text: '年',
          onClick: picker => {
            this.valueFormat = 'yyyy';
            this.changeType('year')
          }
        }, {
          text: '月',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM';
            this.changeType('monthrange')
          }
        }, {
          text: '日期时间',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM-dd HH:mm:ss';
            this.changeType('datetimerange')
          }
        }],
        disabledDate(time) {
          if (self.yearEnd) {
            return self.yearEnd < time.getFullYear();
          } else {
            // return time.getFullYear() > new Date().getFullYear()
          }
        }
      }
    },
    processDate() {
      const self = this
      return {
        shortcuts: [{
          text: '年',
          onClick: picker => {
            this.valueFormat = 'yyyy';
            this.changeType('year')
          }
        }, {
          text: '月',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM';
            this.changeType('monthrange')
          }
        }, {
          text: '日期时间',
          onClick: picker => {
            this.valueFormat = 'yyyy-MM-dd HH:mm:ss';
            this.changeType('datetimerange')
          }
        }],
        disabledDate(time) {
          if (self.yearStart) {
            return self.yearStart > time.getFullYear();
          } else {
            // return time.getFullYear() > new Date().getFullYear()
          }
        }
      }
    },
    changeType(type) {
      this.dateType = type;
      this.dateValue = '';
      this.yearStart = '';
      this.yearEnd = '';
      if (type !== 'year') {
        this.$nextTick(() => {
          this.$refs.datePicker.focus();
        })
      } else {
        this.$nextTick(() => {
          this.$refs.yearStart.focus();
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.yearrange_wrap {
  margin-top: 3px;
  line-height: 33px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  .el-date-editor--year {
    width: 120px;
  }
  /deep/.el-input__inner {
    height: 33px;
    border: none;
  }
  /deep/.el-input__icon {
    line-height: 35px;
  }
  .end_year_picker {
    /deep/.el-input__prefix {
      display: none;
    }
  }
}
</style>
